<!--
- Author:  LiShibin.
- Date:    2017/10/19 0019.
- File:    共享成员列表(分配权限).
-->
<template>
  <div class="Web_Box">
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="bg_fff mb10" v-for="member in gardenMemberList.data">
        <div class="diary">
          <ul class=" f-cb">
            <li class="imgs"  @click="gotoBlog(member.member_id)"><a><img :src="member.member_avatar ? $config.imgsite + $config.avatarSrc + member.member_avatar + '_w150': defaultAvatar"></a></li>
            <li class="pl20 w240"><a>
              <h3 class="d_tit">{{member.member_name}}</h3>
              <p class="slh" @click="gotoDistributedPlantList(member.member_id)">养护植物数量 {{member.curing_flower_num}}</p>
            </a></li>
            <li class="pr20"> <a class="f_close" @click="gotoUnDistributePlantList(member.gm_id)">分配权限</a></li>
            <li> <a class="f_close" @click="delGardenMember(member.gm_id)">删除</a></li>
          </ul>
        </div>
      </div>
    </div>
    <empty-data :show="gardenMemberList.allLoaded && gardenMemberList.data.length <= 0" text="当前没有成员"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>

  export default{
    data() {
      return {
        gardenId: this.$route.query.garden,
        defaultAvatar: require('../../../assets/images/avatar.png'),
        gardenMemberList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getGardenMemberList(this.gardenMemberList.page, this.gardenMemberList.pageSize)
    },
    methods: {
      gotoBlog(memberId) {
        this.$router.push({name: 'blog-index', query: {member: memberId}})
      },
      gotoGoodsDetail(storeId, id) {
        this.$router.push({name: 'goods-detail', params: {id: id}, query: {storeId: storeId}})
      },
      gotoUnDistributePlantList(gardenMemberId) {
        this.$router.push({name: 'distribute-plant', query: {garden: this.gardenId, gardenMember: gardenMemberId}})
      },
      gotoDistributedPlantList(member_id) {
        this.$router.push({name: 'distribute-member-plant', query: {garden: this.gardenId, member: member_id}})
      },
      getGardenMemberList(page, pageSize) {
        this.gardenMemberList.loading = true
        this.$request.getGardenMemberList(this.gardenId, page, pageSize).then(data => {
          if (data.length < this.gardenMemberList.pageSize) {
            this.gardenMemberList.allLoaded = true
          }
          this.gardenMemberList.data = [...this.gardenMemberList.data, ...data]
        }).finally(() => {
          this.gardenMemberList.requested = true
          this.gardenMemberList.loading = false
        })
      },
      loadMore() {
        if (this.gardenMemberList.loading || this.gardenMemberList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGardenMemberList(++this.gardenMemberList.page, this.gardenMemberList.pageSize)
        }, 500)
      },
      delGardenMember(id) {
        this.$messageBox.confirm('你确定要删除吗?').then(action => {
          this.$request.delGardenMember(id).then(data => {
            this.$toast('删除成功')
            for (let i = 0; i < this.gardenMemberList.data.length; i++) {
              if (this.gardenMemberList.data[i].gm_id == id) {
                this.gardenMemberList.data.splice(i, 1)
              }
            }
          }).catch(e => {
            this.$toast('删除失败：' + e.msg)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style>

</style>